<template>
  <div style="overflow: auto;height:100vh">
    <van-pull-refresh class="min-heigh" v-model="isLoading" @refresh="onRefresh">
      <div v-if="cardList" class="min-heigh" >
          <div @click.stop="formulatePlan(val)"  class="list-box" v-for="(val,k) in cardList" :key="k">
            <div class="cardlist zxzbg3">
              <div :class="{'Avtive':val.hide==1}"></div>
              <div class="blanklogobg">
                <img :src="val.bankCode | fmtBankimsrc"  :onerror="commonConfig.errorImg" />
              </div>
              {{val.bank}} 【{{val.bankCard | fmtCardNo
              }}】
              <span class="dzx" @click.stop="jumPage(val)">修改</span>
              <div style="clear:both"></div>
              <!-- <div :class="{ showtext:isshowtext}" v-if="isshowtext">
                <marquee  style="margin:0px auto;width:100%;" >注意:{{list}}执行计划要提高信用卡的扫码支付额度（单笔一千，单日大于该计划的预留金额，单月大于该计划的还款金额）可拨打银行客服电话95595或在光大银行app设置</marquee>
              </div>-->
              <van-row class="zdr">
                <van-col span="7">账单日：{{val.statementDate}}</van-col>
                <van-col span="7">还款日：{{val.repaymentDate}}</van-col>
                <van-col span="10" style="margin-top:-2px;">
                   可用还款
                  <span style="color:white;font-size:20px;">
                    {{val |fmthkdate}}
                    天
                  </span>
                </van-col>
              </van-row>

              <!-- <button class="zdjh" @click="zdjh(val)">制定计划</button> -->
              <!-- <button class="zdjh" v-if="tostopa" style="margin:15px 0;margin-top:20px;" @click="isshow">制定计划</button> -->
              <Modal v-model="stopplan" :closable="false" cancel-text ok-text="确定">
                <p style="text-align: left;">提示:</p>
                <p style="text-align: center;margin-top:20px;">提示:通道维护，请使用其他通道制定计划。</p>
              </Modal>
              <div style="clear:both"></div>
            </div>
          </div>
          
      </div>
      <div class="min-heigh center" v-else>
        <NODAT></NODAT>
      </div>
    </van-pull-refresh>
     <div class="foot-box fiex center">
          <div :class="{'sel':selFoot==1}" class="fiex1">
              制定计划
          </div>
          <div class="foot-l"></div>
          <div @click="selFootFun(2)" :class="{'sel':selFoot==2}" class="fiex1">
              计划查询
          </div>
     </div>
  </div>
</template>
<script>
var $th = "";
import NODAT from "@/components/NoData.vue";
export default {
  components:{
    NODAT
  },
  data() {
    return {
      count: 0, //刷新次数
      selFoot:1,
      isLoading: false, //刷新状态
      stopplan: false,
      tostopa: false,
      tostop: false,
      isActive: false,
      cardList:this.$store.state.cccardList,
      // isshowtext:false,
      list: "光大银行",
      jumPageData:"" //判断是要q去大额页面还是小额页面  BG 大额  SG:小额
    };
  },
  created() {
    // this.show()
  },
  mounted() {
    $th = this;
    // $th.historyBack = function(){
    //   alert(666)
    // };
    // //监听返回
    // window.removeEventListener("popstate",$th.historyBack,false);
    // window.addEventListener("popstate",$th.historyBack,false);
    $th.jumPageData = localStorage.getItem("jumPageData");
    $th.loadData();
    console.log(" $th.cardList",  $th.cardList);
  },
  methods: {
    selFootFun(){
        $th.$router.push("/planList")
    },
    async loadData(){
      
      var sendData = {
             type:"2",  //1:储蓄卡2信用卡
             token: localStorage.getItem("token")
      }
       var cardDetial = await $th.$axiosFun('/customer/bankCard/findList',sendData,'get');
        $th.cardList =cardDetial.data;
        //val:BG 大额  SG:小额
        if($th.jumPageData=='SG'){ //对于小额进行不支持银行限制
          var dontBack = {};//不支持银行可列表
          var dontBackApi = await $th.$axiosFun('/plan/aisle/ruleBank/findRuleBank',{
            property:"1",
            programNameWeb:"kyq",
          },'get'); //获取不支持银行卡
          if(dontBackApi.code==1000){
              dontBack = dontBackApi.data;
          }else{
            $th.$toast(dontBackApi.message)
            return
          }
          $.each($th.cardList,function(k,v){
            v.hide = 1;
            if(dontBack[v.bankCode]){  //银行不被支持
                  v.hide = 1;
            }
          })
          $th.$forceUpdate();
        }
        //对于大额进行不支持银行限制
        if($th.jumPageData=='BG'){ 

          var dontBack = {};//支持银行列表
          var dontBackApi = await $th.$axiosFun('/plan/aisle/ruleBankBig/findRuleBankBig',{
            property:"1",
            programNameWeb:"kyq"
          },'get'); //获取不支持银行卡
          if(dontBackApi.code==1000){
              dontBack = dontBackApi.data;
          }else{
            $th.$toast(dontBackApi.message)
            return
          }
          $.each($th.cardList,function(k,v){
            if(!dontBack[v.bankCode]){  //银行不被支持
                  v.hide = 1;
            }
          })
          $th.$forceUpdate();
        }
    },
    formulatePlan(val){ //制定计划  val: BG 大额  SG:小额
       if($th.jumPageData=='BG'){
        if(val.hide==1){ //小额不支持该银行
              $th.$toast("目前不支持该银行");
              return
           }
            $th.$router.push('/zdjh?id='+val.id);
           localStorage.setItem("id",val.id);
          return
       }
         if($th.jumPageData=='SG'){
          $th.$toast("系统维护中")
           return
           if(val.hide==1){ //小额不支持该银行
              $th.$toast("小额目前不支持该银行请使用大额");
              // return
           }
           $th.$router.push('/zdjhSG?id='+val.id);
           localStorage.setItem("id",val.id);
          return
       }
    },
    jumPage(val){
      localStorage.setItem("id",val.id);
      this.$router.push('/modifyCard?id='+val.id);
    },
    onRefresh() {
      setTimeout(() => {
        $th.loadData();
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
    isshow() {
      this.stopplan = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.foot-box .sel{color:#4F8BF4; }
.foot-box{background: #fff;z-index: 100;position: fixed; bottom:0; width: 100%; padding: 15px 0; box-shadow: 0px -2px 3px 3px rgba(245, 241, 241, 0.8)  }
.foot-l{height: 20px; border-right: 1px solid #cccc;}
.cardlist {
  width: 90%;
  margin: 10px auto;
  background: #cccccc;
  position: relative;
  border-radius: 10px;
  line-height: 46px;
  font-size: 16px;
  color: white;
}
.Avtive {
  width: 100%;
  z-index: 10;
  position: absolute;
  height: 100%;
  border-radius: 10px;
  line-height: 200px;
  background: url("http://hstatic.1818pay.cn/image/disable/jtmb@2x.png")
    no-repeat;
  background-position: 100% 100%;
  background-size: 125% 100%;
}
.showtext {
  width: 100%;
  top: 40px;
  width: 100%;
  background: white;
  color: rgb(78, 78, 78);
  height: 20px;
  line-height: 20px;
}
.w9mau {
  width: 90%;
  margin: 0 auto;
}

.zxzbg {
  background: url("http://hstatic.1818pay.cn/image/icon/cl1.png");
  background-size: cover;
}

.zxzbg1 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl3.png");
  background-size: cover;
}

.zxzbg2 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl2.png");
  background-size: cover;
}

.zxzbg3 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl4.png");
  background-size: cover;
}

.blanklogobg {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  text-align: center;
  float: left;
  margin: 10px;
  line-height: 20px;
}

.blanklogobg img {
  width: 20px;
  margin-top: 2px;
}

.dzx {
  float: right;
  margin: 10px;
  font-size: 14px;
  line-height: 30px;
  background: #fff;
  color: #4f8bf4ff;
  text-align: center;
  width: 70px;
  border-radius: 30px;
  position: relative;
  z-index: 10;
}

.zdr {
  font-size: 12px;
  color: #fff;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.zdjh {
  width: 115px;
  height: 35px;
  float: right;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  line-height: 30px;
  text-align: center;
  color: #67728f;
  margin: 20px 20px;
  margin-top: 10px;
  margin-bottom: 15px;
  border: none;
}

.van-progress {
  height: 10px;
  background-color: white;
  border-radius: 8px;
}
</style>